<title>邮箱验证</title>

<link rel="stylesheet" href="/assets/assets(home)/css/email.css">


<!-- <header class="mui-bar mui-bar-nav mui-bar-nav-bg">
    <a id="icon-menu" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">邮箱验证</h1>
</header> -->

<div class="user">
    <div class="avatar wow fadeInUp">
        {if condition="$AutoLogin['avatar'] && is_file('.'.$AutoLogin['avatar'])"}
        <img src="{$AutoLogin.avatar}" />
        {else /}
        <img src="/assets/assets(home)/images/avatar.jpg" />
        {/if}
    </div>
</div>

<form class="mui-input-group" method="post" enctype="multipart/form-data">
    <div class="mui-input-row">
        <label>邮箱：</label>
        <input type="text" name="email" value="{$AutoLogin.email}" class="mui-input-clear" placeholder="请输入邮箱" required
            disabled />
    </div>

    <div class="mui-input-row">
        <label>验证码：</label>
        <input type="text" name="code" class="mui-input-clear" placeholder="请输入验证码" required />
    </div>


    <div class="mui-button-row">
        <button type="submit" class="mui-btn mui-btn-primary">确认</button>
        <button type="button" id="send" class="mui-btn mui-btn-success">发送邮件</button>
    </div>
</form>


<script>
    var sec = 60
    var T

    // 点击发送邮件
    $("#send").click(async function () {
        // 确认对话框
        mui.confirm(
            '是否确认发送验证码',
            '邮件提醒',
            ['确认', '取消'],
            (res) => {
                if (res.index === 0) {
                    $(this).html('邮件发送中....')
                    $(this).attr('disabled', true)

                    // 发送ajax请求，让后端来帮我发送验证码
                    $.ajax({
                        url: `{:url('home/business/email')}`,
                        type: 'POST',
                        dataType: 'json',
                        data: { action: 'send' },
                        success: (success) => {
                            // 轻提醒
                            mui.toast(success.msg, { duration: 3000 })

                            if (success.code) {
                                // 倒计时
                                $(this).html(sec)
                                $(this).attr('disabled', true)
                                T = setInterval(autoplay, 1000)
                            }
                        },
                    })

                }
            }
        )
    })

    function autoplay() {
        var num = $("#send").html()
        num = parseInt(num)

        if (num <= 0) {
            //停止定时器
            clearInterval(T)
            $("#send").removeAttr('disabled')
            $("#send").html('重新发送验证码')
        } else {
            $('#send').html(num - 1)
        }
    }


    //修改浏览器自带的后退按钮
    window.history.pushState(null, null, ``);

    window.addEventListener('popstate', function (e) {
        e.preventDefault()
        location.href = `{:url('/home/business/center')}`
    }, false)
</script>